<template>
    <view class="current">
        <view class="current-city">
            <view class="cu-title">当前定位</view>
            <view class="city-name">
                <view class="ad-icon">
                    <image src="/static/icon/address.png" mode="scaleToFill" />
                </view>
                <view>{{ address ? address : '定位失败' }}</view>
            </view>
        </view>
        <view class="wraper">
            <wd-index-bar sticky>
                <view v-for="item in newData" :key="item.index">
                    <wd-index-anchor :index="item.index" :id="item.index" :key="item.index" />
                    <wd-cell border clickable v-for="(city, i) in item.data" :key="i" :title="city.city"
                        @click="handleClick(item.index, city)"></wd-cell>
                </view>
            </wd-index-bar>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, onMounted, computed, watch } from 'vue'
import { getOpenCityList } from '@/api/apiList'
import { groupCitiesByLetter } from './resetData'

const props = defineProps({
    position: {
        type: Object,
        default: () => { }
    }
})

// 获取已开通列表
const openCityList = ref([])
let newData = ref([])
const getOpenCity = async () => {
    const res = await getOpenCityList()
    if (res.code == 200) {
        openCityList.value = res.data
        newData.value = groupCitiesByLetter(openCityList.value, {
            keepData: true, // 保留完整数据
            cityKey: 'city' // 指定城市名字段
        })
        // newData.value[0].data[0].latitude = '30.5728'
        // newData.value[0].data[0].longitude = '104.0668'
    }
}


onMounted(() => {
    getOpenCity()
})

let address = ref('')
watch(() => props.position, (newVal) => {
    address.value = props.position.addressName
}, { deep: true })

// let position = ref({})
const getStore = () => {
    if (uni.getStorageSync('position')) {
        // position.value = JSON.parse(uni.getStorageSync('position'))
    }
}

onShow(() => {
    // getStore()
})


const emits = defineEmits(['changeCity'])

const handleClick = (index, city) => {
    uni.setStorageSync('currentPosition', { latitude: city.latitude, longitude: city.longitude, city: city.city })

    emits('changeCity', city)
}

</script>

<style lang="scss" scoped>
.current {
    padding: 20rpx;

    .current-city {
        display: flex;
        align-items: center;

        .cu-title {
            margin-right: 20rpx;
            color: #3c4b7c;
        }

        .city-name {
            color: #3c4b7c;
            border-radius: 30rpx;
            background-color: #f3f3f3;
            box-sizing: border-box;
            padding: 10rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ad-icon {
                width: 30rpx;
                height: 30rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 10rpx;
            }

            image {
                height: 100%;
                width: 100%;
            }
        }
    }
}

.wraper {
    margin-top: 20rpx;
    // height: calc(80vh - 100rpx);
    // overflow-y: auto;
    // height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
    // height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
    height: calc(100vh - var(--window-top));
}
</style>